<template>
   <div id="lin">
    <div class="file-btn">
          <el-button
      type="primary"
      icon="el-icon-edit"
      size="mini"
      @click="EditImg"
      style="margin-top: 40px"
      >上传文件</el-button
    >
    </div>
    <!-- 头像对话框 -->
    <el-dialog title="上传文件" :visible.sync="isShow" class="second-dig">
      <el-upload
        class="upload-demo"
        ref="upload"
        action="Fake Action"
        :on-change="handleChange"
        :file-list="fileList"
        :auto-upload="false"
        :http-request="handleHttpRequest"
      >
        <el-button slot="trigger" size="small" type="primary"
          >选取文件</el-button
        >
        <el-button
          style="margin-left: 10px"
          size="small"
          type="success"
          @click="submitUpload"
          >提交</el-button
        >
        <div slot="tip" class="el-upload__tip">
          只能上传jpg/png文件,且不超过500kb
        </div>
      </el-upload>
    </el-dialog>
     <div class="img-url" v-for="(url,index) in UrlData" :key="index">
        <span>显示地址: {{url}}</span>
     </div>
   </div>
</template>

<script>
export default {
name:'Lin',
data() {
    return {
         isShow: false,
         UrlData:this.$store.state.user.FanUrl || [],
         fileList: [],
         flieData: null,
          formLabelWidth: "80px",
    }
},
methods:{
     EditImg() {
      this.isShow = true;
    },
     // 以下都为上传头像方法
    handleChange(file) {
      this.flieData = file;
    },
    handleHttpRequest() {
      let formData = new FormData();
      formData.append("file", this.flieData.raw);
      this.$store.dispatch("user/LinUpdataFile", formData);
    },
    // 自定义提交
    submitUpload() {
      this.$refs.upload.submit();
      this.isShow = false;
      this.$message({
        message: "上传文件成功",
        type: "success",
      });

    },
}
}
</script>

<style lang="less" scoped>
#lin{
    width:100vw;
    height:100vh;
  .file-btn{
    width:200px;
    height:150px;
    margin-left:30px;
  }
  .img-url{
    width:100vw;
    height:auto;
    margin-left:30px;
    display: flex;
    flex-direction: column;
    span{
        margin-bottom: 20px;
    }
  }
}
</style>